{% extends "BackendBundle::backend.html.twig" %}

{% set vars = {'ruta' : app.request.attributes.get('_route')} %}

{% block title "Secciones" %}

{% block css %}

   {% stylesheets
        '@ContentBundle/Resources/public/css/default.css'
   %}
        <link rel="stylesheet" type="text/css" media="screen" href="{{ asset_url }}" />
   {% endstylesheets %}
        
{% endblock %}

{% block js %}

    {% javascripts
        '@ContentBundle/Resources/public/js/jquery-ui-1.js'
    %}
        <script src="{{ asset_url }}"></script>
    {% endjavascripts %}
        
        <script type="text/javascript">
            
            var sitemapHistory = {
                stack: new Array(),
                temp: null,
                //takes an element and saves it's position in the sitemap.
                //note: doesn't commit the save until commit() is called!
                //this is because we might decide to cancel the move
                saveState: function(item) {
                    sitemapHistory.temp = { item: $(item), itemParent: $(item).parent(), itemAfter: $(item).prev() };
                },
                commit: function() {
                    if (sitemapHistory.temp != null) sitemapHistory.stack.push(sitemapHistory.temp);
                },
                //restores the state of the last moved item.
                restoreState: function() {
                    var h = sitemapHistory.stack.pop();
                    if (h == null) return;
                    if (h.itemAfter.length > 0) {
                        h.itemAfter.after(h.item);
                    }
                    else {
                        h.itemParent.prepend(h.item);
                    }
                            //checks the classes on the lists
                            $('#sitemap li.sm2_liOpen').not(':has(li)').removeClass('sm2_liOpen');
                            $('#sitemap li:has(ul li):not(.sm2_liClosed)').addClass('sm2_liOpen');
                }
            }
          
            //init functions
            $(function() {
                $('#sitemap li').prepend('<div class="dropzone"></div>');

                $('#sitemap dl, #sitemap .dropzone').droppable({
                    accept: '#sitemap li',
                    tolerance: 'pointer',
                    drop: function(e, ui) {
                        var li = $(this).parent();
                        var child = !$(this).hasClass('dropzone');
                        if (child && li.children('ul').length == 0) {
                            li.append('<ul/>');
                        }
                        if (child) {
                            li.addClass('sm2_liOpen').removeClass('sm2_liClosed').children('ul').append(ui.draggable);
                        }
                        else {
                            li.before(ui.draggable);
                        }
                                    $('#sitemap li.sm2_liOpen').not(':has(li:not(.ui-draggable-dragging))').removeClass('sm2_liOpen');
                        li.find('dl,.dropzone').css({ backgroundColor: '', borderColor: '' });
                        sitemapHistory.commit();
                    },
                    over: function() {
                        $(this).filter('dl').css({ backgroundColor: '#ccc' });
                        $(this).filter('.dropzone').css({ borderColor: '#aaa' });
                    },
                    out: function() {
                        $(this).filter('dl').css({ backgroundColor: '' });
                        $(this).filter('.dropzone').css({ borderColor: '' });
                    }
                });

                //var myArray = new Array();
                //var countstart = 0;
                
                $('#sitemap li').draggable({
                    handle: ' > dl',
                    opacity: .8,
                    addClasses: false,
                    helper: 'clone',
                    zIndex: 100,
                    start: function(e, ui) {
                        sitemapHistory.saveState(this);

                        //myArray[countstart] = this;

                        //countstart++;

                    }
                });
                $('.sitemap_undo').click(sitemapHistory.restoreState);
                $(document).bind('keypress', function(e) {
                    if (e.ctrlKey && (e.which == 122 || e.which == 26))
                        sitemapHistory.restoreState();
                });

                $('.sm2_expander').live('click', function() {
                    $(this).parent().parent().toggleClass('sm2_liOpen').toggleClass('sm2_liClosed');
                    return false;
                });

                //init functions
                $(function() {

                    $('.control').live('click', function() {
                        
                        var myArray = new Array();
                        var countstart = 0;

                        $('#sitemap li').each(function(index) {
                            
                            myArray[countstart] = this;
                            countstart++;

                        });

                        var k = 0;
                        
                        var IDmogudo = "";
                        var IDpare = "";
                        var IDsota = "";

                        var ResultatArray = new Array();
                        
                        for (vkey in myArray) {

                            IDmogudo = "";
                            IDpare = "";
                            IDsota = "";

                            $(myArray[vkey]).find('.hotelid').each(function(index) {

                                if (index == 0) {
                                    //alert("Id Moguda --> "+ $(this).text());
                                    IDmogudo = $(this).text();
                                }
                            });

                            $(myArray[vkey]).parent().parent().find('.hotelid').each(function(index) {
                                //alert(index + ': ' + $(this).text());
                                if (index == 0) {
                                    //alert("Id Pare --> "+ $(this).text());
                                    IDpare = $(this).text();
                                }
                            });

                            $(myArray[vkey]).prev().find('.hotelid').each(function(index) {
                                //alert(index + ': ' + $(this).text());
                                if (index == 0) {
                                    //alert("id per sota de --> "+ $(this).text());
                                    IDsota = $(this).text();
                                }
                            });
                             
                            ResultatArray[k] = new Array();
                            ResultatArray[k][0] = IDmogudo;
                            ResultatArray[k][1] = IDpare;
                            ResultatArray[k][2] = IDsota;

                            //alert(IDmogudo +" - "+ IDpare +" - "+ IDsota);

                            k = k + 1;

                        }

                        $.ajax({
                            url: "{{ path('ContentBundle_secciones_list_ajax') }}",
                            type: "POST",
                            data: { 
                                "ididioma" : "{{ idioma }}",
                                "dadesArray" : ResultatArray 
                            },
                            success: function(data) {

                                // Quan tot va be, 
                                document.location.reload(true);
                                
                            }
                        });

                    });

                });     

            });                       
            
        </script>
        
{% endblock %}

{% block header %}

    {% include "BackendBundle::topmenu.html.twig" with vars %}

{% endblock %}

{% block left %}

    {% include "ContentBundle:Hotel:menuleft.html.twig" with vars %}

{% endblock %}

{% block content %}

    <div class="span9">
    
        <h2>{{ "Imágenes"|trans }}</h2>
        <fieldset>
            <legend>{{ "Imágenes de"|trans }} "{{hotel.hotelname}}"</legend>
            
            {% if app.session.hasFlash('success') %}
                <div class="flash-notice alert alert-success">
                    <h4 class="alert-heading">{{ "Ok"|trans }}!</h4>                     
                    {{ app.session.flash('success') }}
                </div>
            {% endif %}

            {% if app.session.hasFlash('error') %}
                <div class="flash-notice alert alert-error">
                    <h4 class="alert-heading">{{ "Error"|trans }}!</h4>                        
                    {{ app.session.flash('error') }}
                </div>
            {% endif %}

            {% if app.session.hasFlash('info') %}
                <div class="flash-notice alert alert-info">
                    <h4 class="alert-heading">{{ "Info"|trans }}!</h4>
                    <p>{{ app.session.flash('info') }}</p>
                </div>
            {% endif %}
            
            <noscript>

                <div class="flash-notice alert alert-error">
                    <h4 class="alert-heading">Javascript is disabled</h4>
                    <p>T'informo senyor usuari, que si no tens activat el Javascript, <b>no podras ordenar</b>.</p>
                </div>
            
            </noscript>            
           
                
            <div class="page">
            
              
                
            </div>
            
        </fieldset>
    </div>
        
        <div id="proves"></div>

{% endblock %}












































<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>UploadiFive Test</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>

{% javascripts '@ImagesBundle/Resources/public/js/*' %}
<script src="{{ asset_url }}" type="text/javascript"></script>
{% endjavascripts %}

{% stylesheets '@ImagesBundle/Resources/public/css/*' %}
<link rel="stylesheet" type="text/css" href="{{ asset_url }}">
{% endstylesheets %}

<style type="text/css">
#queue {
	border: 1px solid #E5E5E5;
	height: 177px;
	overflow: auto;
	margin-bottom: 10px;
	padding: 0 3px 3px;
}
</style>
</head>

<body>

<div class="accordion" id="accordion">
  <div class="accordion-group">
    <div class="accordion-heading">
      <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseOne">{{ "Subir archivos"|trans }}</a>
    </div>
    <div id="collapseOne" class="collapse in">
      <div class="accordion-inner">
	    <form>
		  <div id="queue"></div>
		  <div class="btn btn-mini"><input id="file_upload" name="file_upload" type="file" multiple="true"></div>
		  <a class="btn btn-small btn-inverse" href="javascript:$('#file_upload').uploadifive('upload')">{{ "Subir al servidor"|trans }}</a>
	    </form>
      </div>
    </div>
  </div>

  <div class="accordion-group">
    <div class="accordion-heading">
      <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">{{ "Editar archivos"|trans }}</a>
    </div>
    <div id="collapseTwo" class="collapse">
      <div class="accordion-inner">
        <div class="pagination">
          <ul>
            <li><a href="#">Prev</a></li>
            <li class="active">
              <a href="#">1</a>
            </li>
            <li><a href="#">2</a></li>
            <li><a href="#">3</a></li>
            <li><a href="#">4</a></li>
            <li><a href="#">Next</a></li>
          </ul>
        </div>
        
        <div class="pagination">
          <ul>
            <li><a href="#">Prev</a></li>
            <li class="active">
              <a href="#">1</a>
            </li>
            <li><a href="#">2</a></li>
            <li><a href="#">3</a></li>
            <li><a href="#">4</a></li>
            <li><a href="#">Next</a></li>
          </ul>
        </div>        
      </div>
    </div>
  </div>

	<script type="text/javascript">
		$(function() {
			$('#file_upload').uploadifive({
				'auto'         : false,
				'formData'     : {'test' : 'something'},
				'queueID'      : 'queue',
				'height'          : 25,  
				'buttonText': '{{ "Seleccionar"|trans }}',
				'uploadScript' : '{{ path("ImagesBundle_Upload") }}',
				'onUploadComplete' : function(file, data) {
					console.log(data);
				}
			});
		});
	</script>
</body>
</html>